<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=750,maximum-scale=1,user-scalable=no">
    <title>数字尾巴 | 分享美好数字生活</title>
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_3027260_z5t4fxs0js.css">
    <link rel="stylesheet" href="./css/clearSure.css">
    <link rel="stylesheet" href="./css/swiper-bundle.min.css">
    <link rel="stylesheet" href="./css/nav.css">
    <link rel="stylesheet" href="./css/evaluating.css">
    <meta name="referrer" content="no-referrer">
</head>

<body>
    <div class="content">
        <div class="nav_bg">
            <header>
                <div class="logo_img">
                    <img src=""
                        alt="">
                </div>
                <a href="#">
                    下载 APP
                </a>
                <div class="search">
                    <i class="iconfont icon-sousuoleimu"></i>
                </div>
            </header>
        </div>
        <div class="swiper_bg">
            <div class="swiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"><img src="https://s1.dgtle.com/dgtle_img/carouselItem/2022/01/10/4fd8d202201102255491887.jpeg" alt="">
                    </div>
                    <div class="swiper-slide"><img src="https://s1.dgtle.com/dgtle_img/carouselItem/2021/12/29/65fae202112291504514300.jpeg" alt="">
                    </div>
                    <div class="swiper-slide"><img src="https://s1.dgtle.com/dgtle_img/carouselItem/2021/12/31/3c6e6202112311659401933.jpeg" alt="">
                    </div>
                    <div class="swiper-slide"><img src="https://s1.dgtle.com/dgtle_img/carouselItem/2022/01/11/18a3d202201111516103534.jpeg" alt="">
                    </div>
                    <div class="swiper-slide"><img src="https://s1.dgtle.com/dgtle_img/carouselItem/2022/01/10/b1977202201101753426414.jpeg" alt="">
                    </div>

                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination"></div>
            </div>
        </div>

    </div>

    <div class="all">
        <div class="product">
            <div class="product_tittle">
                <span class="product_tittle_left">众测产品</span>
                <span class="product_tittle_rig">更多</span>
            </div>
            <div class="hotProduct">
                <ul class="productBox product_ce">

                </ul>
            </div>
        </div>

        <div class="crowdTest">
            <div class="crowdTest_tittle">
                <span class="crowdTest_tittle_left">众测体验</span>
                <span class="crowdTest_tittle_rig">更多</span>
            </div>
            <div class="crowdTest_content">
                <div>
                    <ul class="productBox product_ti">

                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="switch">
        <div class="header_search">
            <div class="search_ipt">
                <i class="iconfont icon-search-copy"></i>
                <input type="text" placeholder="iPhone X">
            </div>
            <div class="header_close">
                <i class="iconfont icon-error"></i>
            </div>
        </div>
        <ul class="header-modules">
            <li class="header-module">
                <a href="./comment.html">
                    <img src="./img/comment.png" alt="">
                    <p>点评</p>
                </a>
            </li>
            <li class="header-module">
                <a href="./article.html">
                    <img src="./img/article.png" alt="">
                    <p>文章</p>
                </a>
            </li>
            <li class="header-module">
                <a href="./news.html">
                    <img src="./img/news.png" alt="">
                    <p>鲸闻</p>
                </a>
            </li>
            <li class="header-module">
                <a href="./evaluating.html">
                    <img src="./img/test.png" alt="">
                    <p>众测</p>
                </a>
            </li>
        </ul>
        <ul class="header-modules">
            <li class="header-module">
                <a href="./activity.html">
                    <img src="./img/activity.png" alt="">
                    <p>活动</p>
                </a>
            </li>
            <li class="header-module">
                <a href="./aside.html">
                    <img src="./img/lie.png" alt="">
                    <p>闲置</p>
                </a>
            </li>
            <li class="header-module">
                <a href="">
                    <img src="./img/recycling.png" alt="">
                    <p>手机回收</p>
                </a>
            </li>
            <li class="header-module">
                <img src="" alt="">
                <p></p>
            </li>
        </ul>
        <div class="line"></div>
        <div class="header_login">
            <a href="">登录</a>
        </div>
    </div>
    <div class="app">
        <div class="openInApp">APP内打开</div>
    </div>
    <script src="./js/swiper-bundle.min.js"></script>
    <script src="./js/font-size.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="baseurl.js"></script>

    <script>
        window.onload = () => {
            let cont = document.querySelector('.product_ce')
            let cont1 = document.querySelector('.product_ti')
            myget("http://localhost:3000/evaluating").then(res => {
                let str = ''
                res.data.data.forEach((item, index) => {
                    if (item.status == null) {
                        str += ` 
                    <li>
                        <div class="itemBox">
                            <div class="item_img">
                                <img src="${item.img}" alt="">
                            </div>
                            <div class="item_info">
                                <p class="item_info_tittle">${item.testin_tittle}</p>
                                <p class="item_info_status status_may "><span></span>可申请</p>
                                <p class="num">${item.assigned_num}</p>
                                <p class="num">${item.apply_num}</p>
                            </div>
                        </div>
                    </li>`
                    } else if (index == 2) {
                        str += ` 
                    <li>
                        <div class="itemBox">
                            <div class="item_img">
                                <img src="${item.img}" alt="">
                            </div>
                            <div class="item_info">
                                <p class="item_info_tittle">${item.testin_tittle}</p>
                                <p class="item_info_status status_experience "><span></span>体验中</p>
                                <p class="num">${item.assigned_num}</p>
                                <p class="num">${item.apply_num}</p>
                            </div>
                        </div>
                    </li>`
                    } else {
                        str += ` 
                    <li>
                        <div class="itemBox">
                            <div class="item_img">
                                <img src="${item.img}" alt="">
                            </div>
                            <div class="item_info">
                                <p class="item_info_tittle">${item.testin_tittle}</p>
                                <p class="item_info_status status_over "><span></span>已结束</p>
                                <p class="num">${item.assigned_num}</p>
                                <p class="num">${item.apply_num}</p>
                            </div>
                        </div>
                    </li>`
                    }
                })
                cont.innerHTML = str
            }).catch(err => {
                console.log(err);
            })
            myget("http://localhost:3000/experience").then(res => {
                let str = ''
                res.data.data.forEach((item, index) => {
                    str += ` 
                    <li>
                            <div class="img">
                                <img src="${item.img}" alt="">
                            </div>
                            <div class="info">
                                <p class="articleTitle">
                                    ${item.featured_tittle}
                                </p>
                                <p class="time">${item.featured_time}</p>
                                <p class="likeAndComment">
                                    <img src="">                               
                                         <i>${item.like}</i>
                                    <img src="">          
                                          <i>${item.talk}</i>
                                </p>
                            </div>
                        </li>`
                })
                cont1.innerHTML = str
            }).catch(err => {

            })
        }

        // 轮播
        var mySwiper = new Swiper('.swiper', {
                direction: 'horizontal', // 垂直切换选项
                slidesOffsetAfter: 100,
                slidesPerView: 1.2,
                spaceBetween: 20,
                centeredSlides: true,
                // 如果需要分页器
                pagination: {
                    el: '.swiper-pagination',
                    dynamicBullets: true,
                },

                // 如果需要前进后退按钮
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },

                // 如果需要滚动条
                scrollbar: {
                    el: '.swiper-scrollbar',
                },
            })
            // 搜索切换
        $('.search').click(() => {
            $('.content').css({
                'display': ' none'
            })
            $('.switch').css({
                'display': 'block'
            })
            $('body').css({
                'background': '#fff'
            })
            document.querySelector('.all').classList.add('none')
        })
        $('.header_close').click(() => {
            $('.content').css({
                'display': ' block'
            })
            $('.switch').css({
                'display': 'none'
            })
            $('body').css({
                'background': '#f5f5f5'
            })
            document.querySelector('.all').classList.remove('none')
        })
        document.querySelector('.content .logo_img').onclick = () => {
            location.href = 'index.html'
        }
    </script>
</body>

</html>